import React from "react";
import styles from './uc-cell.module.css';
// 类型检查propsTypes
import propsTypes from 'prop-types';
import { withRouter } from 'react-router-dom';

class UcCell extends React.Component {

    static defaultProps = {
        index: undefined,
        to: null,
        label: '',
        url: ''
    };
    static propTypes = {
        index: propsTypes.number,
        label: propsTypes.string,
        url: propsTypes.string,
        // title: propsTypes.string.isRequired,
        title: function (props, propName, componentName) {
            if (!props[propName]) {
                return new Error(
                    'Invalid prop `' + propName + '` is isRequired' +
                    ' `' + componentName + '`. Validation failed.'
                );
            }
            // console.log(1,props[propName])
            if (props[propName].length > 15) {
                return new Error(
                    'Invalid prop `' + propName + '` length to large' +
                    ' `' + componentName + '`. Validation failed.'
                );
            }
        },
        /*to: propsTypes.shape({//是个对象
          pathname: propsTypes.string()
        }),*/

        //多种类型
        /* to: propsTypes.oneOfType([
           propsTypes.string,
           propsTypes.object
         ])*/

        to: propsTypes.oneOfType([
            propsTypes.string,
            propsTypes.shape({
                pathname: propsTypes.string.isRequired,
                search: propsTypes.string
            })
        ])

    };

    go = () => {
        let { url, to, history } = this.props;
        if (url) window.open(url, '_blank')
        else if (to) {
            history.push(to)
        }
    };

    render() {
        let { index, title, label, children } = this.props;
        return (
            <div className={styles["uc-cell"]}>

                {
                    children && <div className={styles.flr}>{children}</div>
                }

                <div onClick={this.go}>

                    <h2>
                        {index + 1 ? <span>{index + 1} . </span> : null}
                        {title}
                    </h2>
                    <p>{label}</p>
                </div>
            </div>
        );
    }
}
export default withRouter(UcCell)
